<template>
  <div>
    <h1 style="margin-bottom: 20px">详情</h1>
    <div class="ring_bg">
      <div>
        <span>{{ orderInfo.bussinessTypeName }}</span>
        <el-button type="primary" v-if="userInfo.isSuperAdmin==='1'" @click="downLoadOrderInfo"
                   style="float: right;height: 30px;line-height: 30px;padding: 0 10px;">
          <span class="iconfont icon-download"></span> &nbsp;下载到本地
        </el-button>
      </div>
      <div>
        <div class="template-form">
          <el-form :model="orderInfo" label-width="100px" class="template-form__list">
            <div style="font-size: 30px;font-weight: bolder;margin: 10px 0 10px 50px">
              <span class="iconfont icon-dianxin" style="color: #489af6;font-size: 30px;margin-right: 10px"></span>
              {{ orderInfo.cardNo }}
            </div>
            <div style="margin-left: 100px">
              <el-tag style="line-height: 24px;height: 24px">
                最低消费套餐：{{ orderInfo.cardPackageName || orderInfo.cardAaaaPackageName }}
              </el-tag>
              <el-tag style="line-height: 24px;height: 24px" v-if="!!orderInfo.cardAaaaNoTypeName">
                靓号类型：{{ orderInfo.cardAaaaNoTypeName }}
              </el-tag>
              <el-tag style="line-height: 24px;height: 24px">最低预存：{{ orderInfo.minPreStorm }}</el-tag>
              <el-tag style="line-height: 24px;height: 24px">合约期：{{ orderInfo.contractPeriod }}</el-tag>
              <el-tag style="line-height: 24px;height: 24px">开卡费：{{ orderInfo.cardOpeningFee }}</el-tag>
            </div>
            <el-divider></el-divider>
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="单号：" class="ring_list">
                  <span style="font-size: 12px">
                    {{ orderInfo.id }}
                  </span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="提交时间：" class="ring_list">
                  <span style="font-size: 12px">
                    {{ orderInfo.createTime }}
                  </span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="选择套餐：" class="ring_list">
                  <span style="font-size: 12px">
                    {{ orderInfo.orderPackageName }}
                  </span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="22">
                <el-form-item label="身份证照片：" class="ring_list">
                  <el-upload action="#" list-type="picture-card" style="float: left" ref="upload1" :auto-upload="false"
                             :file-list="idCardZmList">
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                      <img class="el-upload-list__item-thumbnail"
                           :src="file.url" alt="">
                      <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview"
                              @click="handlePictureCardPreview(file)">
                          <i class="el-icon-zoom-in"></i>
                        </span>
                        <span class="el-upload-list__item-delete" v-if="userInfo.isSuperAdmin==='1' || userInfo.userType==='01'" @click="handleDownload(file)">
                          <i class="el-icon-download"></i>
                        </span>
                      </span>
                    </div>
                  </el-upload>
                  <el-upload action="#" list-type="picture-card" style="float: left" ref="upload2" :auto-upload="false"
                             :file-list="idCardFmList">
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                      <img class="el-upload-list__item-thumbnail"
                           :src="file.url" alt="">
                      <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview"
                              @click="handlePictureCardPreview(file)">
                          <i class="el-icon-zoom-in"></i>
                        </span>
                        <span class="el-upload-list__item-delete" v-if="userInfo.isSuperAdmin==='1' || userInfo.userType==='01'" @click="handleDownload(file)">
                          <i class="el-icon-download"></i>
                        </span>
                      </span>
                    </div>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="userInfo.userType==='01'">
              <el-col :gutter="10">
                <el-form-item label="身份证头像：">
                  <img :src="orderInfo.idCardPhoto" style="WIDTH: 124px; HEIGHT: 150px"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="用户姓名：" class="ring_list">
                  <span style="font-size: 12px">
                    {{ orderInfo.userName }}
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="身份证号：" class="ring_list">
                  <span style="font-size: 12px">
                    {{ orderInfo.idCardNo }}
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="orderInfo.businessType==='NEW_CARD_FUSE'">
                <el-form-item label="区域：" class="ring_list">
                  <span style="font-size: 12px">
                    {{ orderInfo.areaName }}
                  </span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="22">
                <el-form-item label="半身照片：" class="ring_list">
                  <el-upload action="#" list-type="picture-card" style="float: left" ref="upload3" :auto-upload="false"
                             :file-list="halfPhotoUrlList">
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                      <img class="el-upload-list__item-thumbnail"
                           :src="file.url" alt="">
                      <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview"
                              @click="handlePictureCardPreview(file)">
                          <i class="el-icon-zoom-in"></i>
                        </span>
                        <span class="el-upload-list__item-delete" v-if="userInfo.isSuperAdmin==='1' || userInfo.userType==='01'" @click="handleDownload(file)">
                          <i class="el-icon-download"></i>
                        </span>
                      </span>
                    </div>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10" v-if="orderInfo.businessType==='NEW_CARD_FUSE'">
              <el-col :span="12" style="width: 100%">
                <el-form-item label="详细地址：" class="ring_list">
                  <div class="ring_text_area">{{ orderInfo.address }}</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="12" style="width: 100%">
                <el-form-item label="备注：" class="ring_list">
                  <div class="ring_text_area" v-html="orderInfo.remarks" style="margin-bottom: 40px"></div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="30%">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <div class="ring_bg">
      <span class="ring_title">业务流程</span>
      <business-process v-if="orderInfo.id" :id="orderInfo.id"></business-process>
    </div>
  </div>
</template>

<script>
import request from "@/utils/Request";
import BusinessProcess from "@/views/page/comp/BusinessProcess";
import {getImgBlob} from "@/utils/Common";
import {downLoad} from "@/utils/DownLoadUtil";


export default {
  name: "ShopOrderView",
  components: {BusinessProcess},
  data() {
    return {
      orderInfo: {},
      idCardZmList: [],
      idCardFmList: [],
      halfPhotoUrlList: [],
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload({name, url}) {
      this.downLoadImg(url, name);
    },
    downLoadImg(_blob, _filePath) {
      // 创建a标签，用于跳转至下载链接
      const tempLink = document.createElement('a')
      tempLink.style.display = 'none'
      tempLink.href = _blob
      let split = _filePath.split('/');
      tempLink.setAttribute('download', decodeURI(split[split.length - 1]))
      // 兼容：某些浏览器不支持HTML5的download属性
      if (typeof tempLink.download === 'undefined') {
        tempLink.setAttribute('target', '_blank')
      }
      // 挂载a标签
      document.body.appendChild(tempLink)
      tempLink.click()
      document.body.removeChild(tempLink)
    },
    downLoadOrderInfo() {
      downLoad.bind(this);
      downLoad('/openCardOrder/downLoadOrderInfo', {id: this.$route.query.id});
    },
    init() {
      request.get("/openCardOrder/info", {params: {id: this.$route.query.id}}).then(({data}) => {
        if (data.success) {
          this.orderInfo = data.data;
          let idCardZmPath = this.orderInfo.idCardZmPath;
          if (!!idCardZmPath) {
            getImgBlob(idCardZmPath, 'file1').then(url => {
              let strings = idCardZmPath.split('/');
              this.idCardZmList = [{name: strings[strings.length - 1], url: url}]
            });
          }
          let idCardFmPath = this.orderInfo.idCardFmPath;
          if (!!idCardFmPath) {
            getImgBlob(idCardFmPath, 'file2').then(url => {
              let strings = idCardFmPath.split('/');
              this.idCardFmList = [{name: strings[strings.length - 1], url: url}]
            });
          }
          let halfPhotoPath = this.orderInfo.halfPhotoPath;
          if (!!halfPhotoPath) {
            getImgBlob(halfPhotoPath, 'file3').then(url => {
              let strings = halfPhotoPath.split('/');
              this.halfPhotoUrlList = [{name: strings[strings.length - 1], url: url}]
            });
          }
        } else {
          throw new Error()
        }
      }).catch(err => {
        this.$message({type: 'error', message: "查询工单信息"});
        console.log(err)
      })
    }
  },
  computed: {
    userInfo() {
      return JSON.parse(localStorage.getItem('userInfo'));
    }
  },
  watch: {
    idCardZmList(newValue, oldValue) {
      this.$refs.upload1.$children[1].$el.style.display = "none";
    },
    idCardFmList(newValue, oldValue) {
      this.$refs.upload2.$children[1].$el.style.display = "none";
    },
    halfPhotoUrlList(newValue, oldValue) {
      this.$refs.upload3.$children[1].$el.style.display = "none";
    },
  },
}
</script>

<style scoped>


body {
  background: #f1f2f7;
}

.ring_list {
  margin-bottom: 10px;
  font-size: 12px !important;
}

.ring_bg {
  padding: 20px;
  background: #fff;
  border-radius: 3px;
  border: 1px solid #EBEEF3;
  margin-top: 20px;
}

.ring_title {
  line-height: 20px;
  margin-bottom: 20px;
  display: block;
}

.ring_text_area {
  border: 1px solid #EBEEF3;
  height: 4em;
  font-size: 12px;
  margin-bottom: 10px;
  width: 100%;
  padding: 2px 10px;
  background: #fafafa;
  border-radius: 3px;
}

.template-form {
  width: 1000px;
  margin: 60px auto;
}
</style>